<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定v-model指令</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <input type="text" v-model="msg">
        {{msg}}
        <br>
        <!--底层代码，v-model靠什么来实现的？-->
        <!--v-bind v-on-->
        <input type="text"  :value="message" v-on:keyup="valueChange" > 
        {{message}}
        <!-- v-model 就是v-bind 和 v-on的语法糖-->
        <!--  v-on：当我们输入框输入内容时，因为input中v-model绑定了message，所以会把实时输入的内容传递到后台message中-->
        <!--所以v-model实现了双向绑定-->

        <!--input还可以换成多行文本-->
    </div>


    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:'1111'
            },
            methods:{
                valueChange(event){
                    //console.log(event);
                    tbis.message =event.target.value
                }
            }
        })
    </script>
</body>
</html>